:root {
  --primary-color: #31c27c;     /*伪类 设置 作为全局主题色 方便改变*/
}
body {
  margin: 0;     /*外边距全为0*/
  background: #f5f5f5;     /*设置背景色*/
  font-family: Microsoft Yahei;     /*字体微软雅黑*/
  font-size: 14px;     /*字体大小14px*/
  /* min-width: 1000px; */
}
a {
  text-decoration: none;     /*取消a标签下划线*/
  color: #000;     /*字体颜色*/
}
header {
  height: 90px;     /*高度90px*/
  background: white;     /*背景色白色*/
  display: flex;     /*弹性布局，让导航栏成为一行*/
  align-items: center;     /*在交叉轴上居中显示*/
}
.header-inner, main {
  /* width: 1200px; */
  padding: 20px;     /*内边距20px*/
  margin: auto;     /* 大盒子居中对齐*/
}
.tag-list {
  margin-top: 50px;     /*上外边距50px*/
  margin-bottom: 15px;     /*下外边距15px*/
}
.tag-item {
  display: inline-block;     /*设置为内联块状元素  可以成为行内元素变成一行 不换行 本身还是内联盒子 但是可以设置宽和高*/
  padding: 0 8px;     /*内边距上下0 左右8px*/
  margin-right: 24px;     /*右外边距24px*/
  line-height: 26px;     /**行高26px*/
  color: #000;     /*字体黑色*/
  text-decoration: none;     /*去除下划线*/
}
.tag-active {
  background: var(--primary-color);     /*将主题色应用到背景色*/
  color: white;     /*字体白色*/
}
.tag-item:not(.tag-active):hover {
  color: var(--primary-color);     /*将主题色应用到字体颜色*/
}
.nowrap {
  white-space: nowrap;     /*	处理元素空白：文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。*/
  overflow: hidden;     /*溢出隐藏，该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位*/
  text-overflow: ellipsis;     /*当对象内文本一处时显示省略标记 省略符来代表被修剪的文本*/
}
.playlist { 
  display: grid;     /* 设置该元素为网格容器 网格容器由网格项目组成，并且将那些相同的项目放置或插入到​​列和行内。 */
  grid-template-columns: repeat(auto-fill, minmax(200px,1fr));     /*列宽，尽可能多的容纳自动填充 接受两个参数最大值与最小值 */
  gap: 45px 15px;     /*针对grid-gap 上下间距45px 左右间距15px*/
  margin-bottom: 45px;     /*下外边距45px*/
}
.cover-wrap {
  display: flex;     /*弹性布局 可以让页面需要适应不同屏幕大小 对容器中的子元素进行排列对其和分配空白空间弹性子元素通常在弹性盒子内一行显示*/
  position: relative;     /*设置父层 子层就可以依据父层定位 否则子层就会逐层向上寻找*/
  overflow: hidden;     /*溢出隐藏，该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位**/
  width: 100%;     /*宽度铺满页面*/
  margin-bottom: 15px;     /*下外边距15px*/
  align-items: center;     /*flex布局中 交叉轴上居中对齐*/
  justify-content: center;     /*弹性盒子容器主轴方向上居中对齐*/
  cursor: pointer;    /*鼠标经过或点击时有小手样式*/
}
.cover-img {
  width: 100%;     /*宽度铺满页面*/
  transition: all 0.75s;     /*过度持续0.75s*/
}
.cover-mask {
  position: absolute;     /*绝对定位 脱离文档流的布局 起始位置为最近的父元素 有相对关系 相对于父容器*/
  left: 0;     /*靠左距离0 默认是有间距大小的，现在清除为0*/
  top: 0;     /*靠上距离0*/
  right: 0;     /*靠右距离0*/
  bottom: 0;     /*靠下距离0*/
  background: #000;     /*背景色为黑色*/
  opacity: 0;     /*背景全透明*/
  transition: all 0.5s;     /*过度时间持续0.75s*/
}
.cover-play {
  position: absolute;     /*绝对定位 脱离文档流的布局 起始位置为最近的父元素 有相对关系 相对于父容器*/
  left: 50%;     /*靠左距离50%*/
  top: 50%;     /*靠上距离50%*/
  margin-left: -35px;     /*左外边距-35px*/
  margin-top: -35px;     /*上外边距-35px*/
  opacity: 0;     /*全透明*/
  transform: scale(0.7);     /*沿水平方向和垂直方向缩放0.7*/
  transition: all 0.5s;     /*过渡时间持续0.5s*/
}
.cover-wrap:hover .cover-mask {
  opacity: 0.2;     /*鼠标移动到上方时完全不透明*/
}
.cover-wrap:hover .cover-play {
  opacity: 1;     /*鼠标移动到上方时完全不透明*/
  transform: scale(1);     /*沿水平方向和垂直方向缩放1*/
}
.cover-wrap:hover .cover-img {
  transform: scale(1.07);     /*沿水平方向和垂直方向缩放1.07, scale(数值)定义倍数缩放，>1放大，<1缩小*/
}
.album-title:hover {
  color: var(--primary-color);     /*鼠标移动到上方 颜色变为主题色*/
}
.album-author {
  color: #999;     /*设置颜色*/
  line-height: 1.6;     /*行高1.6rem*/
}
.album-author:hover {
  color: var(--primary-color);     /*鼠标移动到上方 颜色变为主题色*/
}
.album-time {
  color: #999;     /*设置颜色*/
}
.page {
  display: flex;     /*弹性布局 可以让页面需要适应不同屏幕大小 对容器中的子元素进行排列对其和分配空白空间弹性子元素通常在弹性盒子内一行显示 */
  align-items: center;     /*flex布局中 交叉轴上居中对齐*/
  justify-content: center;     /*弹性盒子容器主轴方向上居中对齐*/
}
.page-item {
  display: inline-block;     /*设置为内联块状元素  可以成为行内元素变成一行*/
  color: #a2a2a2;     /*设置颜色*/
  line-height: 50px;     /*行高50px*/
  padding: 0 20px;     /*内边距上下0 左右20*/
  margin: 10px;     /*外边距上下左右都10px*/
  font-size: 16px;     /*字体大小16px*/
}
.page-current, .page-item:not(.page-more):hover {
  background: var(--primary-color);     /*鼠标悬停时 颜色变为主题色*/
  color: white;     /*字体颜色白色*/
}
footer {
  margin-top: 60px;     /*上外边距60px*/
  background: #333;     /*背景色黑色*/
  height: 200px;     /*高度200px*/
}


